<template>
  <a-layout h-screen overflow-hidden>
    <a-layout-header
      class="!p-inline-0 !h-48px !bg-#3b82f6 !dark:bg-#001529 !lh-48px"
      select-none
      z-3
      shadow-lg
      flex-between>
      <!-- logo -->
      <LogoTitle flex-none />

      <!-- other -->
      <div flex-auto flex-between pr-16px gap-8px>
        <!-- left -->
        <div flex-auto flex-start gap-16px>
          <!-- 折叠侧边栏按钮 -->
          <CollapsedBtn />
        </div>
        <!-- right -->
        <div flex-none flex-end gap-8px>
          <!-- 工作台 -->
          <WorkbenchLink theme="dark" />

          <!-- 全屏 -->
          <!-- <ToggleFullScreen theme="dark" /> -->

          <!-- 消息 -->
          <Notify theme="dark" />

          <!-- 头像 -->
          <UserDropdown ml-32px />
        </div>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        v-model:collapsed="siderCollapsed"
        select-none
        theme="light"
        :width="siderWidth"
        collapsible
        :collapsed-width="siderCollapsedWidth"
        :trigger="null"
        z-2
        shadow-lg>
        <div h-full flex="~ col between items-stretch">
          <!-- 企业信息展示 -->
          <EnterpriseInfo flex-none />

          <a-divider flex-none m-0 />

          <!-- 菜单 -->
          <CompanyMenu flex-auto />

          <a-divider flex-none m-0 />

          <!-- 全部功能 -->
          <FunctionOverviewTrigger flex-none />
        </div>
      </a-layout-sider>

      <a-layout-content overflow-hidden relative z-1>
        <!-- 全部功能抽屉 -->
        <FunctionOverviewDrawer />

        <RouterView />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import Notify from '@/layouts/components/Notify.vue';
import ToggleFullScreen from '@/layouts/components/ToggleFullScreen.vue';
import UserDropdown from '@/layouts/components/UserDropdown.vue';
import CollapsedBtn from '@/layouts/components/companyLayout/CollapsedBtn.vue';
import CompanyMenu from '@/layouts/components/companyLayout/CompanyMenu.vue';
import EnterpriseInfo from '@/layouts/components/companyLayout/EnterpriseInfo.vue';
import FunctionOverviewTrigger from '@/layouts/components/companyLayout/FunctionOverviewTrigger.vue';
import LogoTitle from '@/layouts/components/companyLayout/LogoTitle.vue';
import WorkbenchLink from '@/layouts/components/WorkbenchLink.vue';
import { useCompanyLayoutStore } from '@/stores/ui/companyLayout';
import FunctionOverviewDrawer from '@/layouts/components/companyLayout/FunctionOverviewDrawer.vue';

const { siderCollapsed, siderCollapsedWidth, siderWidth } = storeToRefs(useCompanyLayoutStore());
</script>

<style scoped></style>
